<template>
	<view>

		<div class="top">
			<div class="box1">
				<img src="../../static/psx/余额.png" alt="">
			</div>
			<div class="box2">
				钱包余额
			</div>
			<div class="box3">
				￥{{this.data.momeny}}
			</div>
			<div class="detailed" @click='detailed'>积分明细></div>
		</div>
		<div class="box">

			<div class="btn" @click='go'>
				<span>充值</span>
			</div>

			<div class="btn2" @click='go2'>
				<span>提现</span>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: []
			};
		},
		onShow() {
			this.getdata()
		},
		methods: {
			// 前往积分明细
			detailed() {
				uni.navigateTo({
					url: '/pages/person/detailed'
				})
			},
			getdata() {
				this.$api.getpsxintegral().then(res => {
					this.data = res.data[0]
					console.log(this.data);
				})
			},
			go() {
				uni.navigateTo({
					url: '/pages/person/recharge'
				})
			},
			go2() {
				uni.navigateTo({
					url: '/pages/person/withdrawal'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailed {
		width: 132rpx;
		height: 27rpx;
		font-family: YouYuan;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #323232;
		position: absolute;
		top: 10%;
		right: 5%;
	}

	.top {
		width: 100%;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-content: space-evenly;
		position: relative;
		border-bottom: 1rpx solid #cbcbcb;
		padding-bottom: 40rpx;

		.box1 {
			width: 150rpx;
			height: 150rpx;
			background-color: #8fc31f;
			border-radius: 50%;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.box2 {
			width: 124rpx;
			height: 27rpx;
			font-family: YouYuan;
			font-size: 28rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #171717;
		}

		.box3 {
			// width: 112rpx;
			height: 38rpx;
			font-family: MicrosoftYaHei;
			font-size: 50rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #8fc31f;
		}
	}

	.box {
		width: 710rpx;
		// height: 700rpx;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		.box1 {
			// width: 122rpx;
			height: 60rpx;
			font-family: YouYuan;
			font-size: 28rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #171717;
		}

		.box2 {
			// width: 680rpx;
			height: 50rpx;
			font-family: YouYuan;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #323232;
		}

		.btn {
			width: 710rpx;
			height: 88rpx;
			background-color: #8fc31f;
			border: solid 1rpx #bababa;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx 0;

			span {
				width: 80rpx;
				height: 31rpx;
				font-family: YouYuan;
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #fafafa;
			}
		}

		.btn2 {
			width: 710rpx;
			height: 88rpx;
			background-color: #f0f0f0;
			border: solid 1rpx #d7d7d7;
			display: flex;
			justify-content: center;
			align-items: center;

			span {
				width: 80rpx;
				height: 30rpx;
				font-family: YouYuan;
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #323232;
			}
		}
	}
</style>
